<template>
    <li v-for="item in arr">
        {{ item }}
    </li>

    <button @click="revBtn">数组翻转</button>
    <button @click="slicBtn">数组截取</button>
    <button @click="uodateBtn">数组更新</button>
    <button @click="fileBtn">数组过滤</button>
</template>

<script setup>
import { ref } from 'vue';

const arr = ref([1, 2, 3, 4, 5])
const arr2 = ref([6,7,8])
const revBtn = () => {
    //数组翻转可以直接更新
    arr.value.reverse()
}
const slicBtn = () => { 
    //数组截取不可以直接更新 重新赋值
    console.log(arr.value.slice(0, 3));
   arr.value = arr.value.slice(0, 3)
}
const uodateBtn = () => { 
    //更新一个元素是可以直接更新的
    // arr.value[4] = 100
    // 如果要追加的话 就需要重新赋值了
    console.log(arr.value.concat([6, 7, 8]));
    arr.value = arr.value.concat(arr2.value)

}
const fileBtn = () => { 
    console.log(arr.value.filter(item => item > 3));
    // 过滤数组不可以直接更新 需要重新赋值
    // arr.value = arr.value.filter(item => item > 3)
    arr.value = arr2.value.filter(
        function (val, index, arr) { 
            console.log(index);
            
            return val >2
        }
    )
}

</script>

<style lang="scss" scoped>

</style>